@import '../../styles/util'

\:host
  position: relative
  display: block

  &:hover .slick-nav
    visibility: visible

  &.loading
    @include flex-xy-center
    height: 100%

.slick-list
  overflow: hidden
  transform: translateZ(0)

  &.none
    display: none

  &.hidden
    visibility: hidden

  .slick-track
    @include flex-align(center, flex-start)
    height: 100%
    transition: all .5s ease

.slick-no-content
  flex: 1
  text-align: center
  padding: 2rem 0
  font-size: $font-md

.slick-dots
  @include flex-xy-center
  height: 1rem
  width: 100%

  li
    height: 0.125rem
    width: 1.875rem
    margin: 0 0.625rem
    border: 1px solid $brand-primary
    border-radius: 0.25rem
    opacity: 0.5
    cursor: pointer

    &:hover
      background: $brand-primary

    &.slick-active
      background: $brand-primary
      opacity: 1

  &.only-dots
    height: 0.75rem

    li
      height: 0.25rem

.slick-nav
  @include flex-xy-center
  position: absolute
  top: 0
  height: 100%
  cursor: pointer
  opacity: 0.5
  visibility: hidden

  svg
    fill: $icon-reverse

  &:hover:before
    opacity: 0.3

  &:before
    position: absolute
    top: 50%
    content: ''
    width: 1.875rem
    height: 3.5rem
    transform: translateY(-50%)
    border-radius: 0.125rem
    background-color: #000
    opacity: 0.05

.slick-nav-next
  right: 0.25rem

  svg
    transform: translateX(-35%)

  &:before
    right: 0

.slick-nav-prev
  left: 0.25rem

  svg
    transform: translateX(35%)

  &:before
    left: 0
